/*
 * @Date: 2023-12-19 10:02:59
 * @LastEditors: lyx
 * @LastEditTime: 2023-12-22 08:49:54
 * @FilePath: \taro-template3\src\components\PlugInSheet\index.tsx
 * @Description:
 */
import { ActionSheet, Avatar, Switch } from "@nutui/nutui-react-taro";
import { ScrollView, View } from "@tarojs/components";
import usePlugInSheet from "./hooks/usePlugInSheet";
import styles from "./index.module.scss";
import { IconFont } from "@nutui/icons-react-taro";
import Plugin from "@/assets/images/pluginFilled.png";

function PlugInSheet() {
  const plugInSheetInst = usePlugInSheet();

  return (
    <View className={styles["plug-in-sheet-wrapper"]}>
      <IconFont
        name={Plugin}
        size="2rem"
        onClick={() => {
          plugInSheetInst.setVisible(true);
        }}
      />
      <ActionSheet
        visible={plugInSheetInst.visible}
        onSelect={() => {
          plugInSheetInst.setVisible(false);
        }}
        onCancel={() => plugInSheetInst.setVisible(false)}
      >
        <View className={styles["head"]}>
          <View className={styles["head-title"]}>选择插件 </View>
          <View className={styles["head-num"]}>
            {`${plugInSheetInst.plugInState?.checkedList?.length ?? 0}/${
              // plugInSheetInst.plugInState?.list?.length ?? 0
              3 // 插件可选择数量
              }`}
          </View>
        </View>
        <ScrollView scrollY className={styles["content-wrapper"]}>
          <View className={styles["content"]}>
            {plugInSheetInst?.plugInState?.list?.map((item) => (
              <View className={styles["plug-in-item"]} key={item.id}>
                <View className={styles["img"]}>
                  <Avatar
                    src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
                    shape="square"
                  />
                </View>
                <View className={styles["info"]}>
                  <View className={styles["title"]}>
                    <View className={styles["name"]}>{item.name}</View>
                    <Switch
                      checked={plugInSheetInst.plugInState.checkedList?.includes(
                        item.id
                      )}
                      disabled={
                        plugInSheetInst.plugInState.checkedList?.length > 2 &&
                        !plugInSheetInst.plugInState.checkedList?.includes(
                          item.id
                        )
                      }
                      onChange={(value) =>
                        plugInSheetInst.handleSwitchChange(value, item)
                      }
                    />
                  </View>
                  <View className={styles["desc"]}>{item.desc}</View>
                </View>
              </View>
            ))}
          </View>
        </ScrollView>
      </ActionSheet>
    </View>
  );
}

export default PlugInSheet;
